<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <!--<div id="Banner">
    	<ul>
    		<li v-show=""><a href="#app"><img src="./assets/logo.png"/></a></li>
    		<li><a href="#app"><img src="./assets/wx.png"/></a></li>
    	</ul>
    	<div class="bot-box">
    		<i class="bot active"></i>
    		<i class="bot"></i>
    	</div>
    </div>-->
    <h1 v-text="msg"></h1>
    <banner :msg="msg"></banner>
    <!--<div id="NavBottom">
      <router-link :to="n.href" v-for="n,i in navList" v-key="i">
      	<i class="iconfont" :class="n.icon"></i>
      	<label v-text="n.label"></label>
      </router-link>
    </div>-->
    <router-view />
  </div>
</template>
<style>
	@import url("./assets/css/Banner.css");
	
</style>
<script>
//	import { reative } from "@vue/composition-api"
//	import { banner } from "@/components/Banner.vue";
	import { Banner } from "@/components/Banner.vue";
//	import HelloWorld from "@/components/HelloWorld.vue";
//
//export default {
//name: "Home",
//components: {
//  HelloWorld
//}
//};
	export default {
	  name: "App",
	  data(){
	  	return {
	  		msg:"My hopes",
	  		navList:[{ label:"首页",icon:"icon-QQ",href:"/" },
	  		{ label:"商城",icon:"icon-account",href:"/shop" },
	  		{ label:"关于我们",icon:"icon-QQ",href:"/about" },
	  		{ label:"我的",icon:"icon-account",href:"/my" },],
	  		bannerList:[{img:"./assets/logo.png"},{img:"./assets/wx.png"}]
	  	}
	  },
		components: {
	    'banner': Banner
	  }
	  /*
	  setup(){
	  	const state = reative({
	  		navList:[{ label:"首页",icon:"icon-QQ",href:"/" },
	  		{ label:"商城",icon:"icon-account",href:"/shop" },
	  		{ label:"关于我们",icon:"icon-QQ",href:"/about" },
	  		{ label:"我的",icon:"icon-account",href:"/my" },],
	  		bannerList:[{img:"./assets/logo.png"},{img:"./assets/wx.png"}]
	  	});
	  	
	  	return {
	  		...state
	  	}
	  }
	  //*/
	};

</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
